<template>
  <div>
    <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: 0 }">
      <div class="padding-add">
        <el-form
          ref="userFrom"
          :model="userFrom"
          label-width="80px"
          label-position="right"
          @submit.native.prevent
          inline
        >
          <div class="acea-row search-form" v-if="!collapse">
            <div>
              <el-form-item label="企业名称：" label-for="enterprise_name">
                <el-input
                  clearable
                  placeholder="请输入内容"
                  v-model="userFrom.enterpriseName"
                  class="form_content_width"
                />
              </el-form-item>
              <el-form-item label="企业邮箱：" label-for="enterprise_email">
                <el-input
                  clearable
                  placeholder="请输入内容"
                  v-model="userFrom.enterpriseEmail"
                  class="form_content_width"
                />
              </el-form-item>
              <el-form-item label="营业执照码:" label-for="enterprise_no">
                <el-input
                  clearable
                  placeholder="请输入内容"
                  v-model="userFrom.enterpriseNo"
                  class="form_content_width"
                />
              </el-form-item>
              <el-form-item label="联系电话:" label-for="enterprisePhone">
                <el-input
                  clearable
                  placeholder="请输入内容"
                  v-model="userFrom.enterprisePhone"
                  class="form_content_width"
                />
              </el-form-item>
            </div>
            <el-form-item class="search-form-sub">
              <el-button type="primary" @tap="$u.throttle(userSearchs, 500)">搜索</el-button>
              <el-button class="ResetSearch" @tap="$u.throttle(reset, 500)">重置</el-button>
              <a class="ivu-ml-8 font12 ml10" @click="collapse = !collapse">
                <template v-if="!collapse"> 展开 <i class="el-icon-arrow-down" /> </template>
                <template v-else> 收起 <i class="el-icon-arrow-up" /> </template>
              </a>
            </el-form-item>
          </div>
          <div v-if="collapse" class="acea-row search-form">
            <div class="search-form-box">
              <el-form-item label="企业名称：" label-for="enterprise_name">
                <el-input
                  clearable
                  placeholder="请输入内容"
                  v-model="userFrom.enterpriseName"
                  class="form_content_width"
                />
              </el-form-item>
              <el-form-item label="企业邮箱：" label-for="enterprise_email">
                <el-input
                  clearable
                  placeholder="请输入内容"
                  v-model="userFrom.enterpriseEmail"
                  class="form_content_width"
                />
              </el-form-item>
              <el-form-item label="营业执照码:" label-for="enterprise_no">
                <el-input
                  clearable
                  placeholder="请输入内容"
                  v-model="userFrom.enterpriseNo"
                  class="form_content_width"
                />
              </el-form-item>
              <el-form-item label="联系电话:" label-for="enterprisePhone">
                <el-input
                  clearable
                  placeholder="请输入内容"
                  v-model="userFrom.enterprisePhone"
                  class="form_content_width"
                />
              </el-form-item>
              <el-form-item label="地区:" label-for="selected_options">
                <el-cascader
                  :props="props"
                  v-model="userFrom.selectedOptions"
                  placeholder="请选择行政区域"
                  @change="handleChange"
                  style="width: 250px"
                ></el-cascader>
              </el-form-item>

              <el-form-item label="创建时间:" label-for="date_time">
                <el-date-picker
                  v-model="userFrom.dateTime"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </div>

            <el-form-item class="search-form-sub">
              <el-button type="primary" label="default" @click="userSearchs">搜索</el-button>
              <el-button class="ResetSearch" @click="reset('userFrom')">重置</el-button>
              <a class="ivu-ml-8 font12 ml10" @click="collapse = !collapse">
                <template v-if="!collapse"> 展开 <i class="el-icon-arrow-down" /> </template>
                <template v-else> 收起 <i class="el-icon-arrow-up" /> </template>
              </a>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-card>
    <el-card :bordered="false" shadow="never" class="ivu-mt mt16" :body-style="{ padding: '0 20px 20px' }">
      <el-tabs v-model="userFrom.user_type" @tab-click="onClickTab">
        <el-tab-pane :label="item.name" :name="item.type" v-for="(item, index) in headeNum" :key="index" />
      </el-tabs>
      <el-table
        :data="userLists"
        class="mt16"
        ref="table"
        highlight-current-row
        v-loading="loading"
        empty-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        @sort-change="sortChanged"
        @select="handleSelectRow"
        @select-all="handleSelectAll"
      >
        <el-table-column label="ID" min-width="35">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户昵称" min-width="70">
          <template slot-scope="scope">
            <span>{{ scope.row.user_nick }}</span>
          </template>
        </el-table-column>
        <el-table-column label="企业名称" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.shop_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="地区" min-width="60">
          <template slot-scope="scope">
            <span>{{ scope.row.addr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="行业分类" min-width="130">
          <template slot-scope="scope">
            <span>{{ scope.row.shop_category_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="企业LOGO" min-width="50">
          <template slot-scope="scope">
            <div class="tabBox_img" v-viewer>
              <img v-lazy="scope.row.logo" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="营业执照" min-width="50">
          <template slot-scope="scope">
            <div class="tabBox_img" v-viewer>
              <img v-lazy="scope.row.certificate_photo" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="营业执照码" min-width="100">
          <template slot-scope="scope">
            <div>{{ scope.row.passport_number }}</div>
          </template>
        </el-table-column>
        <el-table-column label="联系电话" prop="now_money" min-width="80" :sortable="true">
          <template slot-scope="scope">
            <div>{{ scope.row.tel }}</div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="now_money" min-width="100" :sortable="true">
          <template slot-scope="scope">
            <div>{{ scope.row.create_time }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120">
          <template slot-scope="scope">
            <template>
              <a @click="handleClick(scope.row)">审核</a>

              <el-divider direction="vertical"></el-divider>
              <a @click="userDetail(scope.row)">详情</a>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <pagination
          v-if="total"
          :total="total"
          :page.sync="userFrom.page"
          :limit.sync="userFrom.limit"
          @pagination="pageChange"
        />
      </div>
    </el-card>

    <el-dialog :visible.sync="isShow" title="审核" width="540px" :show-close="true" :close-on-click-modal="false">
      <div class="el-line">
        <div class="el-line-label">认证审核状态:</div>
        <div class="el-line-val">
          <el-radio-group v-model="isProcess">
            <el-radio :label="2">通过审核</el-radio>
            <el-radio :label="4">审核末通过</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="el-line" v-show="isProcess == 2">
        <div class="el-line-label">开通商家权限:</div>
        <div class="el-line-val">
          <el-radio-group v-model="isOpen">
            <el-radio :label="1">开通</el-radio>
            <el-radio :label="0">不开通</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="el-line">
        <div class="el-line-label">用户跟进记录:</div>
        <div class="el-line-val">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 10 }"
            placeholder="请输入内容"
            v-model="textarea2"
          ></el-input>
        </div>
      </div>

      <div class="btn-box">
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-dialog>

    <enterpriseDetails ref="enterpriseDetails" :rowData="rowData"></enterpriseDetails>
  </div>
</template>
<script>
import { getShopAuth, getProvinceFn, auditShopAuth } from '@/api/all';
import enterpriseDetails from './enterpriseDetails.vue';

export default {
  name: '',
  components: {
    enterpriseDetails,
  },
  data() {
    let self = this;
    return {
      userFrom: {
        enterpriseName: '',
        enterpriseEmail: '',
        enterprisePhone: '',
        enterpriseNo: '',
        selectedOptions: [],
        dateTime: '',
        user_type: 'cn',
        page: 1,
        limit: 15,
        address: [],
      },

      collapse: false,
      selectLabelShow: false,
      selectDataLabel: [],
      props: {
        lazy: true,
        lazyLoad: (node, resolve) => {
          const { level } = node; // node 节点数据
          const nodes = []; // 动态节点
          let type = level == 0 ? '0' : node.value; // 0 代表第一次请求
          self
            .provinceFn(type)
            .then((res) => {
              console.log(res);
              res.list.map((item) => {
                let area = {
                  value: item.id,
                  label: item.name,
                  leaf: node.level >= 2,
                };
                nodes.push(area);
              });
              resolve(nodes); // 回调
            })
            .catch((error) => {
              console.log(error);
            });
        },
      },
      headeNum: [
        { type: 'cn', name: '国内' },
        { type: 'com', name: '国外' },
      ],
      userLists: [],
      total: 0,
      rowData: {},
      isShow: false,
      shopID: '',
      id: '',
      isNew: '',
      isProcess: 2,
      textarea2: '',
      isOpen: 0,
      ShopBrandID: '',
    };
  },
  watch: {},
  computed: {},
  async created() {},
  mounted() {
    this.getList();
  },
  methods: {
    onClickTab() {
      this.page = 1;
      this.getList();
    },
    async getList() {
      let params = {
        auth_type: 2,
        page: this.userFrom.page,
        size: this.userFrom.limit,
        search_shop_name: this.userFrom.enterpriseName,
        search_email: this.userFrom.enterpriseEmail,
        search_tel: this.userFrom.enterprisePhone,
        search_begin_create_time: '',
        search_end_create_time: '',
        origin_site: 'cn',
        search_license_number: this.userFrom.enterpriseNo,
      };

      if (this.userFrom.address.length != 0) {
        params.province_id = this.userFrom.address[0];
        params.city_id = this.userFrom.address[1];
      }

      if (this.userFrom.dateTime) {
        params.search_begin_create_time = this.$formatDate(this.userFrom.dateTime[0]);
        params.search_end_create_time = this.$formatDate(this.userFrom.dateTime[1]);
      }
      const res = await getShopAuth(params);

      this.userLists = res.data.data;
      this.total = res.data.total;
      res.data.data.forEach((item) => {
        item.logo = this.imgOssUrl + item.logo;
        item.certificate_photo = this.imgOssUrl + item.certificate_photo;
      });
    },
    openSelectLabel() {
      this.selectLabelShow = true;
    },

    async provinceFn(pid) {
      const res = await getProvinceFn({ pid: pid });
      return res.data;
    },

    //地址选择
    handleChange(label) {
      this.userFrom.address = label;
    },

    userSearchs() {
      this.page = 1;
      this.getList();
    },
    reset() {
      this.userFrom = {
        enterpriseName: '',
        enterpriseEmail: '',
        enterprisePhone: '',
        enterpriseNo: '',
        selectedOptions: [],
        dateTime: '',
        user_type: 'cn',
        page: 1,
        limit: 10,
        address: [],
      };

      this.getList();
    },
    pageChange() {
      this.getList();
    },

    userDetail(row) {
      this.rowData = row;
      this.$refs.enterpriseDetails.getUserReadDetails();
      this.$refs.enterpriseDetails.modals = true;
    },

    handleClick(row) {
      this.isShow = true;
      this.shopID = row.shop_id;
      this.id = row.user_id;
      // this.ShopBrand(row);
      this.isNew = row.shop_role;
    },

    save() {
      let data = {
        user_id: this.id,
        audit_status: this.isProcess,
        shop_role: this.isNew,
        shop_status: this.isOpen,
        brand_id: this.ShopBrandID,
        tracking_message: this.textarea2,
      };
      // }
      if (this.isOpen == 0) {
        data.brand_id = 0;
      }

      auditShopAuth(data)
        .then((res) => {
          this.$message.success(res.msg);
          this.isShow = false;
          this.getList();
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-tabs__item {
  height: 54px !important;
  line-height: 54px !important;
}
.picBox {
  display: inline-block;
  cursor: pointer;

  .upLoad {
    width: 58px;
    height: 58px;
    line-height: 58px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
    font-size: 24px;
    font-weight: 500;
  }

  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.userFrom {
  ::v-deep .ivu-form-item-content {
    margin-left: 0px !important;
  }
}

.userAlert {
  margin-top: 20px;
}

.userI {
  color: var(--prev-color-primary);
  font-style: normal;
}

img {
  height: 36px;
  display: block;
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.tabBox_tit {
  width: 60%;
  font-size: 12px !important;
  margin: 0 2px 0 10px;
  letter-spacing: 1px;
  padding: 5px 0;
  box-sizing: border-box;
}

.modelBox {
  ::v-deep .ivu-modal-body {
    padding: 0 16px 16px 16px !important;
  }
}

.vipName {
  color: #dab176;
}

.listbox {
  ::v-deep .ivu-divider-horizontal {
    margin: 0 !important;
  }
}

.labelInput {
  width: 250px;
  border: 1px solid #dcdee2;
  padding: 0 15px;
  border-radius: 5px;
  min-height: 30px;
  cursor: pointer;
  font-size: 12px;
  .span {
    color: #c5c8ce;
  }

  .ivu-icon-ios-arrow-down {
    font-size: 14px;
    color: #808695;
  }
}

.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.search-form {
  display: flex;
  justify-content: space-between;
  .search-form-box {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
  }
}
.search-form-sub {
  display: flex;
}

.el-line {
  display: flex;
  align-items: center;
  margin-top: 20px;

  .el-line-label {
    width: 90px;
    flex-shrink: 0;
  }

  .el-line-val {
    flex: 1;
  }
}

.btn-box {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>

